<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>${_title}</title>

    <!-- Bootstrap core CSS -->

    <link href="${_css}/bootstrap.min.css" rel="stylesheet">

    <link href="${_font}/css/font-awesome.min.css" rel="stylesheet">
    <link href="${_css}/animate.min.css" rel="stylesheet">

    <link href="${_css}/custom.css" rel="stylesheet">
	
	<link rel="stylesheet" href="${_css}/jquery-ui-1.10.4.custom.min.css"/>
	
    <script src="${_js}/jquery.min.js"></script>
    
	<!-- Multiselect -->
	<link rel="stylesheet" href="${_js}/multiselect/lib/google-code-prettify/prettify.css"/>
	<link rel="stylesheet" href="${_js}/multiselect/css/style.css" />
	<script type="text/javascript" src="${_js}/multiselect/js/prettify.min.js"></script>
	<script type="text/javascript" src="${_js}/multiselect/js/multiselect.min.js"></script>  
	
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

</head>

<body style="background: #F7F7F7;">
	<form class="form-horizontal form-label-left" novalidate>
		<input type="hidden" id="groupId" value="<#if groupId?exists>${groupId}</#if>"></hidden>
		<input type="hidden" id="userId" value="<#if userId?exists>${userId}</#if>"></hidden>
	</form>
	<div class="x_title">
        <h2>设置用户组</h2>
        <div class="clearfix"></div>
    </div>
    <div class="col-xs-3" style="margin-left:100px;">
    	<h2>系统中所有的组</h2>
    </div>
	<div id="demo" class="container">
		<div class="row">
			<!-- 所有的组 -->
			<div class="col-xs-3">
				<#if (groups?exists & groups?size > 0)>
					<select name="from" id="undo_redo" class="form-control" size="30" multiple="multiple">
						<#list groups as group>
							<option value="<#if group?exists & group.id?exists>${group.id}</#if>">
								<#if group.name?exists>
									${group.name}
								</#if>
							</option>
						</#list>
					</select>
				</#if>			
			</div>
			
			<div class="col-xs-2">
				<!--
				<button type="button" id="undo_redo_undo" class="btn btn-primary btn-block">undo</button>
				<button type="button" id="undo_redo_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button> 
				-->
				<button type="button" id="undo_redo_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
				<button type="button" id="undo_redo_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
				<!--
				<button type="button" id="undo_redo_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>
				<button type="button" id="undo_redo_redo" class="btn btn-warning btn-block">redo</button> 
				-->
			</div>
			
			<!-- 当前组 -->
			<div class="col-xs-3">
				<#if (groups?exists & groups?size > 0)>
					<select name="to" id="undo_redo_to" class="form-control" size="30" multiple="multiple">
						<#list groups as group>
							<#if group.id == groupId>
								<option value="${group.id}">
									${group.name}
								</option>
							</#if>
						</#list>
					</select>
				</#if>
			</div>
			
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-12 col-sm-12 col-xs-12">
		    <div class="ln_solid"></div>
		    <div class="form-group">
		        <div class="col-md-12 col-md-offset-4">
		            <button type="button" onclick="javascript:history.go(-1)" class="btn btn-primary">返回前一页</button>
		            <button id="send" type="button" class="btn btn-success">保存</button>
		        </div>
		    </div>			
		</div>
	</div> 
	
	<script type="text/javascript">
		$(".btn-success").click(function(){
			var groupId = $("#groupId").val();
			var userId = $("#userId").val();
			var selected = new Array();
			$("#undo_redo_to option").each(function(){
		        var groupId = $(this).val();
		        selected.push(groupId);
		    });
		    if(selected.length == 0 || selected.length >1){
		    	new PNotify({
	            	title: '操作提示',
	            	text: '一个用户必须只属于一个组',
	            	delay: 3e3,
	            	type: 'error'
	        	});
	        	return;
		    }
		    $.ajax({
		        type: "POST",
		        url: "/admin/saveUserGroup",
		        dataType: "json",
		        async: false,
		        data: {uId:userId,gId:selected[0]},
	            success: function(result){
            		if(result.code==-1){
	            		new PNotify({
			            	title: '操作提示',
			            	text: '保存成功',
			            	delay: 3e3,
			            	type: 'success'
			        	});
			        	window.location.href="/admin/list";
				  }else{
						new PNotify({
				        	title: '操作提示',
				        	text: result.msg,
				        	delay: 3e3,
				        	type: 'error'
				    	});       		  	
				  }
	            }
	        });
		});
		
		$(document).ready(function() {
			// make code pretty
			window.prettyPrint && prettyPrint();
			
			if ( window.location.hash ) {
				scrollTo(window.location.hash);
			}
			
			$('.nav').on('click', 'a', function(e) {
				scrollTo($(this).attr('href'));
			});		
			$('#multiselect').multiselect();
			$('.multiselect').multiselect();
			$('.js-multiselect').multiselect({
				right: '#js_multiselect_to_1',
				rightAll: '#js_right_All_1',
				rightSelected: '#js_right_Selected_1',
				leftSelected: '#js_left_Selected_1',
				leftAll: '#js_left_All_1'
			});
	
			$('#keepRenderingSort').multiselect({
				keepRenderingSort: true
			});
	
			$('#undo_redo').multiselect();
		});
		
		function scrollTo( id ) {
			if ( $(id).length ) {
				$('html,body').animate({scrollTop: $(id).offset().top - 40},'slow');
			}
		}
	</script>	
    <script src="${_js}/bootstrap.min.js"></script>
    <!-- bootstrap progress js -->
	<script src="${_js}/progressbar/bootstrap-progressbar.min.js" type="text/javascript"></script>
	<script src="${_js}/nicescroll/jquery.nicescroll.min.js" type="text/javascript"></script>
    
	<script src="${_js}/custom.js" type="text/javascript"></script>
            
	 <!-- PNotify -->
	<script src="${_js}/notify/pnotify.core.js" type="text/javascript"></script>
	<script src="${_js}/notify/pnotify.buttons.js" type="text/javascript"></script>
	<script src="${_js}/notify/pnotify.nonblock.js" type="text/javascript" ></script>   
	
</body>

</html>